<!-- 未来30天访问量趋势预测图 -->
<template>
    <div class="echarts" id="futureTrendsChart"></div>
</template>

<script setup lang="ts" name="futureTrendsChart">
import { ECharts, EChartsOption, init, YAXisComponentOption } from "echarts";

interface ChartProp {
    unit: string[];
    data: number[];
}

let chart: ECharts | null = null;
function initChart(params?: any) {
    const charEle = document.getElementById("futureTrendsChart") as HTMLElement;
    chart = init(charEle) as unknown as ECharts;
    const option = buildOption(params);
    chart?.setOption(option);
    return chart;
}

function updateChart(params?: any) {
    const option = buildOption(params);
    chart?.setOption(option);
}

function buildOption(data: ChartProp) {
    const option: EChartsOption = {
        tooltip: {
            trigger: "axis",
            confine: true,
            formatter: (params: any) => {
                let tipData = params[0];
                let html = `<div class="lineChart-bg">
                        <span style="">${tipData.name} <i >${tipData.value}</i> 人次访问</span>
                    </div>`;
                return html;
            },
            backgroundColor: "transparent", // 提示标签背景颜色
            borderColor: "transparent",
            axisPointer: {
                lineStyle: {
                    type: "dashed",
                },
                snap: true,
            },
            extraCssText: "box-shadow: none;padding:0",
        },
        grid: {
            top: "15%",
            left: "5%",
            right: "5%",
            bottom: "15%",
            // containLabel: true
        },
        xAxis: [
            {
                type: "category",
                boundaryGap: false,
                axisLine: {
                    // 坐标轴轴线相关设置。数学上的x轴
                    show: true,
                    symbol: ["none", "arrow"],
                    symbolOffset: [0, 30],
                    lineStyle: {
                        color: "#233653",
                        shadowOffsetX: 20,
                        shadowColor: "#233653",
                    },
                },
                axisLabel: {
                    // 坐标轴刻度标签的相关设置
                    color: "#7ec7ff",
                    padding: 0,
                    fontSize: 12,
                    formatter: function (data) {
                        return data;
                    },
                },
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: "#192a44",
                    },
                },
                axisTick: {
                    show: false,
                },
                data: initDate(),
            },
        ],
        yAxis: data.unit.map((val: any, index: number) => {
            return {
                name: "(访问量)",
                nameTextStyle: {
                    color: "#7ec7ff",
                    fontSize: 12,
                    padding: [0, 30, -4, 0],
                },
                // nameGap:18,
                minInterval: 1,
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: "#192a44",
                    },
                },
                axisLine: {
                    show: index === 0 ? true : false,
                    lineStyle: {
                        color: "#233653",
                    },
                },
                axisLabel: {
                    show: true,
                    color: "#7ec7ff",
                    padding: 0,
                    formatter: function (value: string) {
                        if (Number(value) >= 10000) {
                            value = Number(value) / 10000 + "w";
                        }
                        return value;
                    },
                },
                axisTick: {
                    show: false,
                },
            } as YAXisComponentOption;
        }),
        series: data.data.map(() => {
            return {
                name: "",
                type: "line",
                symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆
                showSymbol: false,
                smooth: true,
                lineStyle: {
                    width: 1,
                    color: "#707070", // 线条颜色
                    borderColor: "#707070",
                },
                itemStyle: {
                    color: "#F5B348",
                    shadowColor: "rgba(245, 179, 72, 0.3)",
                    shadowBlur: 3,
                },
                emphasis: {
                    scale: true,
                },
                areaStyle: {
                    // 区域填充样式
                    // 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                    color: {
                        type: "linear",
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 0,
                                color: "#846B38", // 0% 处的颜色
                            },
                            {
                                offset: 0.5,
                                color: "#403E47", // 0% 处的颜色
                            },
                            {
                                offset: 1,
                                color: "#11144E", // 100% 处的颜色
                            },
                        ],
                        global: false, // 缺省为 false
                    },

                    shadowColor: "rgba(255, 199, 37, 0)", // 阴影颜色
                    shadowBlur: 20, // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
                },
                data: data.data,
            };
        }),
    };

    return option;
}

// js 获取当前日期到之后一个月30天的日期区间
function initDate(): string[] {
    let dateList: string[] = [];
    let startDate = new Date();
    let endDate = new Date();
    endDate.setDate(startDate.getDate() + 30);
    startDate.setDate(startDate.getDate() + 1);
    while (endDate.getTime() - startDate.getTime() >= 0) {
        let month = (startDate.getMonth() + 1).toString().length === 1 ? "0" + (startDate.getMonth() + 1).toString() : startDate.getMonth() + 1;
        let day = startDate.getDate().toString().length === 1 ? "0" + startDate.getDate() : startDate.getDate();
        dateList.push(month + "/" + day);
        startDate.setDate(startDate.getDate() + 1);
    }
    return dateList;
}

defineExpose({
    initChart,
    updateChart,
});
</script>

<!-- 
<script setup lang="ts">
const initChart = (data: any = {}): ECharts => {
  const charEch: ECharts = init(charEle);
  charEch.setOption(option);
  return charEch;
};

</script>
<style lang="scss" scoped>

</style>

 -->

<style scoped lang="less">
.echarts {
    width: 100%;
    height: 100%;

    :deep(.lineChart-bg) {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        width: 180px;
        height: 60px;
        padding-left: 20px;
        background: url("../images/line-bg.png") no-repeat;
        background-size: 100% 100%;

        span {
            font-size: 12px;
            color: rgb(255 255 255 / 80%);

            i {
                font-style: normal;
                color: #f5b348;
            }
        }
    }
}
</style>
